/* eslint-disable @next/next/no-img-element */ import type { WineType } from "@prisma/client"; import { XIcon } from "lucide-react"; import { useSession } from "next-auth/react"; import Head from "next/head"; import Link from "next/link"; import { useRouter } from "next/router"; import { useEffect, useState } from "react"; import { Button } from "~/components/ui/button"; import { Input } from "~/components/ui/input"; import { Label } from "~/components/ui/label"; import { Popover, PopoverContent, PopoverTrigger, } from "~/components/ui/popover"; import { cn } from "~/lib/utils"; import { api, type RouterOutputs } from "~/utils/api"; const WINE_TYPES: WineType[] = [ "RED", "WHITE", "ROSE", ]; import { Check, ChevronsUpDown } from "lucide-react"; import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, } from "~/components/ui/command"; import { wineries } from "~/lib/data"; import { Textarea } from "~/components/ui/textarea"; import { UploadButton } from "~/utils/uploadthing"; export default function EditWine() { useSession({ required: true }); const router = useRouter(); const utils = api.useUtils(); const wineId = router.query.wineId as string | undefined; const [wine, setWine] = useState( null, ); useEffect(() => { if (wineId === undefined || wine) return; void utils.wine.getWine .fetch({ id: parseInt(wineId) }) .then((wine) => setWine(wine)); }, [wineId, wine, utils.wine.getWine]); const editWine = api.wine.editWine.useMutation(); const handleSaveWine = async () => { if (wine === null) return; await editWine.mutateAsync(wine); await router.push("/"); }; const [winerySelectorOpen, setWinerySelectorOpen] = useState(false); const [typeSelectorOpen, setTypeSelectorOpen] = useState(false); const [uploadBusy, setUploadBusy] = useState(false); const deleteWine = api.wine.deleteWine.useMutation(); const handleDeleteWine = async (id: number) => { utils.wine.getWines.setData(undefined, (prev) => { if (!prev) return prev; return prev.filter((wine) => wine.id !== id); }); await deleteWine.mutateAsync({ id }); await router.push("/"); }; return ( <> Wine Demo App

Edit Wine

{wine?.imageUrl ?? !wine ? ( <> {wine ? (

Uploaded wine label

) : (

)} ) : uploadBusy ? ( ) : ( )}

Name wine && setWine({ ...wine, name: e.target.value })} disabled={!wine} />

Winery No wineries found. {wineries .sort((a, b) => a.name.localeCompare(b.name)) .map((winery) => ( { setWine((prev) => prev ? { ...prev, wineryKey: currentValue === prev.wineryKey ? "" : currentValue, } : null, ); setWinerySelectorOpen(false); }} > {winery.name} ))}

Year wine && setWine({ ...wine, year: parseInt(e.target.value) }) } disabled={!wine} />

Type {WINE_TYPES.map((type) => ( { if (!wine) return; setWine({ ...wine, type, }); setTypeSelectorOpen(false); }} > {type} ))}

Varietal wine && setWine({ ...wine, varietal: e.target.value }) } disabled={!wine} />

Rating wine && setWine({ ...wine, rating: parseFloat(e.target.value) }) } disabled={!wine} />

Note